<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>测试</title>
</head>

<body>
	<form>
		<div>
			<select id="devices"></select>
			<label>分辨率</label> <input type="text" id="dpi_x" value="300" style="width: 25px;" /> <label>X</label> <input
				type="text" id="dpi_y" value="300" style="width: 25px;" />
			<label>色彩模式</label>
			<select id="colorMode">
				<option value="RGB" selected>彩色</option>
				<option value="GRAY">灰色</option>
				<option value="BW">黑白</option>
			</select>
			<label>是否显示设备内置对话框</label>
			<select id="showDialog">
				<option value="true">显示</option>
				<option value="false" selected>不显示</option>
			</select>
			<label>自动进纸模式</label>
			<select id="feedEnable">
				<option value="true">是</option>
				<option value="false" selected>否</option>
			</select>
			<label>自动装填纸张</label>
			<select id="autoFeed">
				<option value="true">是</option>
				<option value="false" selected>否</option>
			</select>
			<label>双面模式</label>
			<select id="dupxMode">
				<option value="true">是</option>
				<option value="false" selected>否</option>
			</select>
			<label>自动纠偏</label>
			<select id="autoDeskew">
				<option value="true">是</option>
				<option value="false" selected>否</option>
			</select>
			<label>自动边框检测</label>
			<select id="autoBorderDetection">
				<option value="true">是</option>
				<option value="false" selected>否</option>
			</select>
		</div>
		<div id="imageList"></div>
		<input type="button" value="获取设备列表" onclick="scanonweb.loadDevices();" />
		<input type="button" value="开始扫描" onclick="startScan()" />
		<input type="button" value="清空扫描结果" onclick="clearAll()" />
		<input type="button" value="获取所有图像" onclick="getAllImage()" />
		<input type="button" value="上传结果" onclick="uploadAllImageAsPdfFormat()" />
		<input type="button" value="上传结果2" onclick="uploadImageFromDom()" />
		<input type="button" value="显示界面" onclick="focusService()" />
		<input type="button" value="隐藏界面" onclick="hideService()" />
	</form>
	<div>
		<p>
			<label style="color: red;margin-top: 15px;">注意本示例需要部署到web服务器下才可正常工作.</label>
		</p>
		<p>
			<a href="https://www.brainysoft.cn/download/ScanOnWebH5Install.exe" target="_blank">扫描服务托盘程序下载</a>
			<a href="https://www.brainysoft.cn/video/scanh5.mp4" target="_blank">视频教程</a>
			<a href="https://www.brainysoft.cn" target="_blank">官方网站</a>
		</p>
	</div>

	<script src="./scanonweb.js" type="text/javascript"></script>
	<script type="text/javascript">

		var scanonweb = new ScanOnWeb();

		//响应返回扫描设备列表的回调函数
		scanonweb.onGetDevicesListEvent = function (msg) {
			var deviceListDom = document.getElementById('devices');

			//clear devices list
			deviceListDom.innerHTML = "";
			for (var i = 0; i < deviceListDom.childNodes.length; i++) {
				ardeviceListDomea.removeChild(deviceListDom.options[0]);
				deviceListDom.remove(0);
				deviceListDom.options[0] = null;
			}

			//add devices info
			for (var i = 0; i < msg.devices.length; ++i) {
				var opt = document.createElement("option");
				opt.innerHTML = msg.devices[i];
				if (i == msg.currentIndex) {
					opt.selected = true;
				}
				deviceListDom.appendChild(opt);
			}
			var licenseMode = 4;//4代表逐台机器绑定授权信息授权方式
			var licenseKey1 = "";//授权许可信息
			var licenseKey2 = "";//授权许可信息
			var checkLicenseUrl = "http://127.0.0.1:28110/check";//这里换成您的授权服务器真实ip地址
			scanonweb.setLicenseKey(licenseMode, licenseKey1, licenseKey2, checkLicenseUrl);
		}

		//响应获取某一页图像的回调函数
		scanonweb.onGetImageByIdEvent = function (msg) {
			console.log("获取图像事件回调,图像id:" + msg.imageIndex + " 图像总数:" + msg.imageCount + " 注意试用版随机删除图像会造成总数降低或不变");
			var imageListDom = document.getElementById('imageList');
			var imageDom = document.createElement("img");
			imageDom.width = 300;
			imageDom.height = 300;
			imageDom.src = "data:image/jpg;base64," + msg.imageBase64;
			//为img标签赋予额外的图像imageIndex属性
			imageDom.setAttribute("imageIndex", msg.imageIndex); //后续修改图像时需要用到
			imageListDom.appendChild(imageDom);
		}

		//响应用户在扫描托盘服务程序中对某一页图像进行了编辑的回调函数
		scanonweb.onImageEditedEvent = function (msg) {
			console.log("图像编辑事件回调,图像id:" + msg.imageIndex);
			//需要自行实现编辑后的图像显示处理，这里只是简单的把修改后的结果显示出来了
			//遍历所有的img标签,如果imageIndex属性值等于msg.imageIndex,则替换图像
			var imageListDom = document.getElementById('imageList');
			for (var i = 0; i < imageListDom.childNodes.length; i++) {
				var imageDom = imageListDom.childNodes[i];
				if (imageDom.getAttribute("imageIndex") == msg.imageIndex) {
					imageDom.src = "data:image/jpg;base64," + msg.imageBase64;
					//让img强制刷新
					imageDom.style.display = "none";
					imageDom.offsetHeight;
					imageDom.style.display = "block";					
					break;
				}
			}
		}

		//响应扫描完成事件
		scanonweb.onScanFinishedEvent = function (msg) {
			console.log("扫描完成事件回调,扫描前:" + msg.imageBeforeCount + " 扫描后:" + msg.imageAfterCount);
		}

		//响应获取图像总数的回调函数
		scanonweb.onGetImageCountEvent = function (msg) {
			console.log("图像总数:" + msg.imageCount + " 当前编辑图像索引:" + msg.currentSelected);
		}

		//响应获取所有图像的回调函数
		scanonweb.onGetAllImageEvent = function (msg) {
			console.log("图像总数:" + msg.imageCount);
			console.log("当前选中编辑的图像id:" + msg.currentSelected);
			var imageListDom = document.getElementById('imageList');
			imageListDom.innerHTML = "";
			for (var i = 0; i < msg.images.length; i++) {
				//如果需要上传,这里可以通过ajax发送	 msg.images[i] 数据给服务器端即可,服务器端收到数据后做base64解码及按照jpg格式存盘即可得到图像

				//这里只是将图像显示在页面上
				var imageDom = document.createElement("img");
				imageDom.width = 300;
				imageDom.height = 300;
				imageDom.src = "data:image/jpg;base64," + msg.images[i];
				imageListDom.appendChild(imageDom);
			}
		}

		//绑定扫描服务托盘程序里面的"开始上传"按钮的点击事件
		scanonweb.onUploadEvent = function (msg) {
			console.log("用户点击了开始上传按钮,当前图像总数:" + msg.imageCount);
			//实现ajax图像上传
			//取http://127.0.0.1:1134/pdf 这个url的pdf文件,然后将pdf文件通过ajax上传到服务器端
			fetch('http://127.0.0.1:1134/pdf')
				.then(response => response.arrayBuffer())
				.then(buffer => {
					// Store the downloaded file in memory
					const file = new File([buffer], 'test.pdf', { type: 'application/octet-stream' });

					// Upload the file to the server using AJAX
					const formData = new FormData();
					formData.append('image', file);

					fetch('http://127.0.0.1:8080/uploadDemo/fileUpload', { //修改这个的url为您的服务器端接收图像的url
						method: 'POST',
						body: formData
					})
						.then(response => {
							// Handle the server response
							console.log(response);
						})
						.catch(error => {
							// Handle the error
							console.error(error);
						});
				})
				.catch(error => {
					// Handle the error
					console.error(error);
				});			
		}

		//开始扫描命令
		function startScan() {
			if (document.getElementById("devices").selectedIndex == -1) {
				alert('请先刷新或者选中要使用的扫描设备后再开始扫描!');
				return;
			}

			//以下获取界面中的扫描参数设定
			scanonweb.scaner_work_config.dpi_x = document.getElementById("dpi_x").value;
			scanonweb.scaner_work_config.dpi_y = document.getElementById("dpi_y").value;
			scanonweb.scaner_work_config.deviceIndex = document.getElementById("devices").selectedIndex;
			scanonweb.scaner_work_config.colorMode = document.getElementById("colorMode").value;
			scanonweb.scaner_work_config.showDialog = document.getElementById("showDialog").value;
			scanonweb.scaner_work_config.autoFeedEnable = document.getElementById("feedEnable").value;
			scanonweb.scaner_work_config.autoFeed = document.getElementById("autoFeed").value;
			scanonweb.scaner_work_config.dupxMode = document.getElementById("dupxMode").value;
			scanonweb.scaner_work_config.autoDeskew = document.getElementById("autoDeskew").value;
			scanonweb.scaner_work_config.autoBorderDetection = document.getElementById("autoBorderDetection").value;


			//开始发送扫描指令
			scanonweb.startScan();

		}

		//清空所有扫描图像
		function clearAll() {
			scanonweb.clearAll();
			document.getElementById('imageList').innerHTML = "";
		}

		//获取图像总数
		function getImageCount() {
			scanonweb.getImageCount();
		}

		//获取所有图像
		function getAllImage() {
			scanonweb.getAllImage();
		}

		//按照jpg格式上传所有图像
		function uploadAllImageAsJpgFormat() {
			var uploadUrl = 'http://localhost:8080/uploadjpg';
			for (imageIndex = 0; imageIndex < scanonweb.imageCount; imageIndex++) {
				scanonweb.uploadJpgImageByIndex(uploadUrl, '1234', 'test', imageIndex);
			}
		}

		//按照pdf格式上传所有图像
		function uploadAllImageAsPdfFormat() {
			scanonweb.uploadAllImageAsPdfToUrl('http://localhost:8080/upload', '1234', 'test');
			return false;
		}

		//按照tiff格式上传所有图像
		function uploadAllImageAsTiffFormat() {
			scanonweb.uploadAllImageAsTiffToUrl('http://localhost:8080/upload', '1234', 'test');
			return false;
		}
		scanonweb.onUploadAllImageAsPdfToUrlEvent=function(msg) {
			console.log(msg);
		}

		//用户点击了托盘服务程序内的上传按钮
		scanonweb.onUploadEvent = function (msg) {
			console.log(msg);
			//正常情况下用下面的代码就可以了,但是有个别客户希望以托盘服务程序里面的图像为准进行上传,所以这里提供了两种上传方式
			/**通过ajax实现图像上传,以下读取imageList里面的所有img标签并将其转换为base64格式,然后通过ajax发送到服务器端
			var imageList = document.getElementById('imageList');
			for (var i = 0; i < imageList.childNodes.length; i++) {
				var imageDom = imageList.childNodes[i];
				if (imageDom.tagName == 'IMG') {
					var imageBase64 = imageDom.src.split(',')[1];
					//这里可以通过ajax发送 imageBase64 到服务器端,服务器端收到数据后做base64解码及按照jpg格式存盘即可得到图像
					console.log(imageBase64);
				}
			}
			**/
			/**
			 * 下面的上传方法使用托盘服务程序里面的http客户端进行图像上传,注意如果服务器端校验客户端必须是登录用户的话肯定是不行的
			 * 因为托盘服务里面的http客户端和浏览器不是同一个东西，session不一样，所以要使用托盘服务进行上传要注意放开服务器端的校验
			 * */
			 uploadAllImageAsPdfFormat();

		}

		function uploadImageFromDom(){
			//这个上传方法从客户端浏览器的dom中获取图像数据,然后通过ajax发送到服务器端
			var imageList = document.getElementById('imageList');
			for (var i = 0; i < imageList.childNodes.length; i++) {
				var imageDom = imageList.childNodes[i];
				if (imageDom.tagName == 'IMG') {
					var imageBase64 = imageDom.src.split(',')[1];
					//构造表单数据
					var formData = new FormData();
					formData.append('image', imageBase64);
					formData.append('imageIndex', i);
					formData.append('name', 'test');

					//使用fetch发送数据
					fetch('http://127.0.0.1:8080/upload', {
						method: 'POST',
						body: formData
					})
						.then(response => {
							// Handle the server response
							console.log(response);
						})
						.catch(error => {
							// Handle the error
							console.error(error);
						});						
				}
			}
		}

		//将扫描服务程序显示出来
		function focusService() {
			scanonweb.setFocus();
		}

		//将扫描服务程序隐藏起来
		function hideService(){
			scanonweb.hidden();
		}

	</script>
</body>

</html>